/**
 * **************************************** 组件生命周期 ****************************************
 * 使用【createReactClass】创建组件时调用
 * getInitialState（初始化 this.state 的值，只在组件装载之前调用一次）
 * getDefaultProps（只在组件创建时调用一次并缓存返回的对象，即在 React.createClass 之后就会调用）
 * 
 * 
 * **************************************** 生命周期函数 ****************************************
 * 
 * 【装载组件触发】
 * componentWillMount（只会在装载之前调用一次，在 render 之前调用，在 V16 版本中废弃）
 * componentDidMount（只会在装载完成之后调用一次，在 render 之后调用）
 * 
 * 【更新组件触发】
 * componentWillReceiveProps（在 V16 版本中废弃）
 * shouldComponentUpdate（会在重新渲染前被触发，返回true 或 false）
 * componentWillUpdate（在 V16 版本中废弃）
 * componentDidUpdate
 * 
 * 【卸载组件触发】
 * componentWillUnmount
 */
import React from 'react';
// import createReactClass from 'create-react-class';
// 使用 ES6
class Clock extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      date: new Date()
    };
  }
  // 装载完成
  componentDidMount() {
    console.log('componentDidMount');
    /**
     * setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
     * setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
     */
    this.timeId = setInterval(() => {
      this.tick();
    }, 1000);
  }
  // 在DOM重新渲染前触发，返回 false 不触发 DOM 更新
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log('shouldComponentUpdate', this.state.date.toLocaleTimeString(), nextState.date.toLocaleTimeString());
  //   if(this.state.date !== nextState.date) {
  //     return true
  //   }
  //   return false
  // }

  // 更新 DOM 时触发
  // componentDidUpdate() {
  //   console.log('componentDidUpdate');
  // }
  // 卸载时触发
  componentWillUnmount() {
    console.log('componentWillUnmount');
    clearInterval(this.timeId);
  }
  tick() {
    this.setState({
      date: new Date()
    })
  }
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <h2>It Is {this.state.date.toLocaleTimeString()}</h2>
      </div>
    );
  }
}
Clock.defaultProps = {
  name: 'Mary'
}


/**
 * 不使用 ES6 可以使用 createReactClass
 * getInitialSate 用法相当于 class类的 constructor，可以初始化 state
 * getDefaultProps 声明默认属性, 相当于class类中的 Clock.defaultProps
 */
// const Clock = createReactClass({
//   // 初始化 state
//   getInitialState: function() {
//     return {
//       name: 'aaaa',
//     }
//   },
//   // 初始化 props
//   getDefaultProps: function(){
//     return {
//       age: 18
//     }
//   },
//   render() {
//     console.log(this)
//     return (
//       <div>我是 {this.state.name}，年龄 {this.props.age}</div>
//     )
//   }
// });
export default Clock;